<template>
	<div class="dashboard-editor-container">
		<div class="tsd">
			<vxe-input @click="tabsd" v-model="batNo" placeholder="请选择电池包号" prefix-icon="el-icon-cpu"
				suffix-icon="el-icon-circle-plus-outline" clearable></vxe-input>
			<!-- <div>
				<svg-icon icon-class="xdcc"></svg-icon>{{batNo}}
			</div>
			<span class="btns" @click="tabsd">切换</span> -->
			<span class="btns">数据时间:{{datastr.sendTime}}</span>

		</div>
		<el-row :gutter="40">
			<el-col :xs="24" :sm="24" :lg="24">
				<el-row>
					<el-col :xs="14" :sm="14" :lg="14" style="display: inline-flex;background: white;">
						<div class="container">
							<div class="header"></div>
							<div class="battery" :style="{'--tops':topss}"></div>
							<div class="socsho">{{datastr.soc}}%</div>
							<svg-icon icon-class="lig" class="lig" v-if="alternate1[9]=='正在充电'"></svg-icon>
							<div class="wave-box">
								<div class="g-wave" :style="{'--tops':tops}"></div>
								<div class="g-wave" :style="{'--tops':tops}"></div>
								<div class="g-wave" :style="{'--tops':tops}"></div>
							</div>
							<span class="showtit" v-if="alternate1[9]=='正在充电'">
								<svg-icon icon-class="pow" class="pow"></svg-icon>{{alternate1[9]}}
							</span>
							<!-- <span><svg-icon icon-class="pows" class="pow"></svg-icon>满电</span>
							<span><svg-icon icon-class="nopower" class="pow"></svg-icon>没电</span> -->
						</div>
						<div class="chart-wrappers">
							<BarCharts ref="setmns" :height="height/2+15+'px'" />

						</div>
						<div class="chart-wrappers">
							<BarChart ref="setmn" :height="height/2+15+'px'" />
						</div>
					</el-col>
					<el-col :xs="5" :sm="5" :lg="5">
						<vxe-table size="mini" style="width: 95%;margin-left: 5%;" border stripe
							:max-height="height/2+15+'px'" :row-config="{isHover: true}" :data="tableDatalist">
							<vxe-column field="date" title="状态属性" sortable></vxe-column>
							<vxe-column field="name" title="状态" sortable>
								<template #default="{ row }">

									<span v-if="row.date=='充放电状态'">
										<span v-if="alternate1[2]!=0">放电中</span>
										<span v-else-if="alternate1[1]!=0">充电中</span>
										<span v-else>待机</span>
									</span>
									<!-- <span v-else-if="row.date=='充电中'" class="ligths"
										:class="{'active1s':alternate1[1]!=0}"></span>
									<span v-else-if="row.date=='放电中'" class="ligths"
										:class="{'active1s':alternate1[2]!=0}"></span> -->
									<span v-else-if="row.date=='警告'" class="ligth"
										:class="{'active1':alternate1[3]!=0}"></span>
									<span v-else-if="row.date=='故障'" class="ligth"
										:class="{'active1':alternate1[4]!=0}"></span>
									<span v-if="row.date=='4G+GPS开启'" class="ligths"
										:class="{'active1s':alternate1[5]!=0}"></span>
									<span v-else-if="row.date=='母线开关'" class="ligths"
										:class="{'active1s':alternate1[6]!=0}"></span>
									<span v-else-if="row.date=='强制关过放'" class="ligths"
										:class="{'active1s':alternate1[7]!=0}"></span>
									<span v-else-if="row.date=='均衡开启'" class="ligths"
										:class="{'active1s':alternate1[8]!=0}"></span>
									<span v-else-if="row.date=='请求加热'" class="ligths"
										:class="{'active1s':alternate1[9]!=0}"></span>
									<span v-else-if="row.date=='过充'" class="ligth"
										:class="{'active1':alternate1[10]!=0}"></span>
									<span v-if="row.date=='过放'" class="ligth"
										:class="{'active1':alternate1[11]!=0}"></span>
									<span v-else-if="row.date=='过温'" class="ligth"
										:class="{'active1':alternate1[12]!=0}"></span>
									<span v-else-if="row.date=='过流'" class="ligth"
										:class="{'active1':alternate1[13]!=0}"></span>
									<span v-else-if="row.date=='短路'" class="ligth"
										:class="{'active1':alternate1[14]!=0}"></span>
									<span v-if="row.date=='采样芯片异常'" class="ligth"
										:class="{'active1':alternate1[15]!=0}"></span>
									<span v-else-if="row.date=='MOS失效'" class="ligth"
										:class="{'active1':alternate1[16]!=0}"></span>
									<span v-else-if="row.date=='通讯异常'" class="ligth"
										:class="{'active1':alternate1[17]!=0}"></span>
									<span v-else>{{row.name}}</span>
								</template>
							</vxe-column>
						</vxe-table>
						<!-- <div class="warning" :style="{'--height':height/2+15+'px'}">
							<div class="wtit">报警状态</div>
							<div class="w1">
								<p>充电<span :class="{'active1':alternate1[9]=='正在充电'}"></span></p>
							</div>
							<div class="w1">
								<p>放电<span :class="{'active':alternate1[9]=='放电'}"></span></p>
							</div>
							<div class="w1">
								<p>过放<span :class="{'active1':alternate1[9]=='过放'}"></span></p>
							</div>
							<div class="w1">
								<p>过温<span :class="{'active1':alternate1[9]=='过温'}"></span></p>
							</div>
							<div class="w1">
								<p>过流<span :class="{'active1':alternate1[9]=='过流'}"></span></p>
							</div>
							<div class="w1">
								<p>短路<span :class="{'active1':alternate1[9]=='短路'}"></span></p>
							</div>
							<div class="w1">
								<p>过充<span :class="{'active1':alternate1[9]=='过充'}"></span></p>
							</div>
						</div> -->
					</el-col>
					<el-col :xs="5" :sm="5" :lg="5">
						<vxe-table style="width: 95%;margin-left: 5%;" stripe border size="mini"
							:max-height="height/2+15+'px'" :row-config="{isHover: true}" :data="tableData">
							<vxe-column field="date" title="属性" sortable></vxe-column>
							<vxe-column field="name" title="值" sortable></vxe-column>
						</vxe-table>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row :gutter="40" style="margin-top:1rem">
			<el-col :xs="24" :sm="24" :lg="24">
				<div class="chart-wrapper">
					<LineChart ref="setmnlin" :height="height/2-5+'px'" />
				</div>
			</el-col>
		</el-row>
		<!-- <websock @websocketonmessage="websocketonmessage" ref="websocket"></websock> -->
		<batlist ref="batlist" @selebatno="selebatno" />
	</div>
</template>

<script>
	import LineChart from './dashboard/LineChart'
	import BarChart from './dashboard/BarChart1'
	import BarCharts from './dashboard/BarCharts1'
	//import websock from '@/components/websocket'
	import batlist from './bat_list.vue'
	import {
		getReal
	} from './capacity.js'
	export default {
		name: 'capacitys',
		components: {
			LineChart,
			BarChart,
			BarCharts,
			//websock,
			batlist
		},
		props: {
			height: {
				type: Number,
				default: 300
			},
			batNos: {
				type: String,
				default: 'Z0000001'
			}
		},
		data() {
			return {
				timers: null,
				alternate1: [],
				flag: true,
				value4: '',
				tops: '100%',
				topss: '100%',
				batNo: 'Z0000001',
				datastr: {
					"alternate1": "0,0,过温,0,短路,4G关闭,母线开,强制关过放,报警关,放电",
					"batCur": 2.0,
					"batNo": "Z0000001",
					"batStatus": 0,
					"batV": 0,
					"count": 0,
					"deviceNo": "DDC002",
					"gpsSignal": 0,
					"gpsSpeed": 0.0,
					"gpsStatus": 0,
					"insulationValue": 0.0,
					"maxSingleBatV": 4.8,
					"minSingleBatV": 2.5,
					"pointJ": 119.975735,
					"pointW": 31.792965,
					"sendTime": "2021-12-23 11:06:23",
					"singleBatV": "60,62",
					"soc": 0,
					"temp": "0",
					"version": 0
				},
				tableDatalist: [{
						date: '充放电状态',
						name: ''
					}, {
						date: '警告',
						name: ''
					},
					{
						date: '故障',
						name: ''
					}, {
						date: '4G+GPS开启',
						name: '',
					}, {
						date: '母线开关',
						name: '',
					}, {
						date: '强制关过放',
						name: ''
					}, {
						date: '均衡开启',
						name: ''
					},
					{
						date: '请求加热',
						name: ''
					},
					{
						date: '过充',
						name: ''
					},
					{
						date: '过放',
						name: ''
					}, {
						date: '过温',
						name: ''
					},
					{
						date: '过流',
						name: ''
					},
					{
						date: '短路',
						name: ''
					},
					{
						date: '采样芯片异常',
						name: ''
					},
					{
						date: 'MOS失效',
						name: ''
					},
					{
						date: '通讯异常',
						name: ''
					}
				],
				tableData: [{
					date: '电池包序列号',
					name: ''
				}, {
					date: '当前连接设备编码',
					name: '',
				}, {
					date: '当前包SOC',
					name: ''
				}, {
					date: '当前包状态',
					name: '',
				}, {
					date: '当前电池包总压',
					name: ''
				}, {
					date: '当前电池包总流',
					name: '',
				}, {
					date: '当前温度',
					name: ''
				}, {
					date: '循环次数',
					name: '',
				}, {
					date: '软件版本号',
					name: '',
				}, {
					date: '最低单体电压',
					name: '',
				}, {
					date: '最高单体电压',
					name: '',
				}, {
					date: 'GPS定位状态',
					name: '',
				}, {
					date: 'GPS卫星信号颗数',
					name: '',
				},{
					date: '硬件版本号',
					name: '',
				}],

			}
		},
		created() {
			//this.sendmes();
			this.batNo = this.batNos
		},
		mounted() {
			//this.initdata();
			//this.$refs.websocket.initWebSocket('');
			// setTimeout(() => {
			// 	this.sendmsg();
			// 	this.getReal();
			// }, 500)
			// this.$nextTick(() => {
			// 	this.sendmsg();
			// 	this.getReal();
			// })
			this.getReal();
			this.timers = setInterval(() => {
				this.getReal();
			}, 10000)
		},
		// filters:{
		//     numFilter(value){
		//       let val=''
		//       if(!isNaN(value) && value !=''){
		//         if(value %1==0 && value!=0){//整数
		//           val=value+".00"
		//         }
		//         else if(value==0){
		//           val=''
		//         }
		//         else{//小数
		//           val=parseFloat(value).toFixed(2)
		//         }
		//       }else{
		//         val=''
		//       }
		//       return val
		//     }
		//   },
		//页面卸载
		beforeDestroy() {
			clearInterval(this.timers);
		},
		
		methods: {
			// sendmes() {
			// 	//console.log("开始发送");
			// 	let actions = {
			// 		'code': 'Z00001',
			// 		'msg': '123',
			// 		'stoken': 'ggggg'
			// 	};
			// 	websocket.Send(JSON.stringify(actions));
			// 	websocket.onmessage = function(e) {
			// 		//console.log("消息到达", e.data);
			// 	}
			// },
			beforeDestroys(){
				//console.log("关闭定时间");
				clearInterval(this.timers);
			},
			//打开页面
			opens(e) {
				let that = this;
				//console.log("打开", e);
				//this.$refs.websocket.initWebSocket('');
				that.batNo = e;
				that.getReal();
				// setTimeout(() => {

				// 	//this.sendmsg();

				// }, 500)


			},
			close(e) {
				this.$refs.setmnlin.close();
			},
			// focusEvent4() {
			// 	this.$refs.xDown4.showPanel()
			// },
			// keyupEvent4() {
			// 	const {
			// 		value4
			// 	} = this
			// 	this.loading4 = true
			// 	setTimeout(() => {
			// 		this.loading4 = false
			// 		if (value4) {
			// 			this.tableData4 = this.tableList4.filter(row => row.name.indexOf(value4) > -1)
			// 		} else {
			// 			this.tableData4 = this.tableList4.slice(0)
			// 		}
			// 	}, 100)
			// },
			// suffixClick4() {
			// 	this.$refs.xDown4.togglePanel()
			// },
			// cellClickEvent4({
			// 	row
			// }) {
			// 	this.value4 = row.name
			// 	this.$refs.xDown4.hidePanel()
			// },
			// pageChangeEvent4({
			// 	currentPage,
			// 	pageSize
			// }) {
			// 	this.tablePage4.currentPage = currentPage
			// 	this.tablePage4.pageSize = pageSize
			// },
			//初始化数据
			async getReal() {
				let parm = {
					"batNo": this.batNo,
					"beginTime": "",
					"endTime": "",
					"pageIndex": 0,
					"pageSize": 0,
					"typeList": []
				}
				let result = await getReal(parm);
				//console.log("返回结果", result.obj);
				if (result.obj) {
					if(result.obj.batCur!=this.datastr.batCur&&result.obj.batV!=this.datastr.batV){
						this.datastr = result.obj;
						this.initdata();
					}
				}

			},
			//接收消息
			websocketonmessage(e) {
				//console.log("xixiix", e.data);
				this.datastr = JSON.parse(e.data);
				this.$nextTick(() => {
					this.initdata();
				})
			},
			//切换弹框
			tabsd() {
				this.$refs.batlist.open();
			},
			//选择
			selebatno(e) {
				this.batNo = e.batNo;
				this.flag = true;
				//this.sendmsg();
				this.getReal();
			},
			//发消息
			sendmsg() {
				let actions = {
					code: this.batNo,
					msgType: '100',
					msg: '123',
					stoken: window.localStorage.getItem('goods__token')
				}
				this.$refs.websocket.websocketsend(JSON.stringify(actions));
			},
			//修改状态
			initdata() {
				let that = this;
				let datstrs = that.datastr;
				let sosc = typeof(datstrs.soc) == "undefined" ? 0 : datstrs.soc;
				that.datastr.soc = sosc;
				that.tops = sosc + "%";
				that.topss = 100 - sosc + "%";
				//
				that.alternate1 = datstrs.alternate1.split(",");
				//列表
				that.tableData[0].name = typeof(datstrs.batNo) == "undefined" ? 0 : datstrs.batNo;
				that.tableData[1].name = typeof(datstrs.deviceNo) == "undefined" ? 0 : datstrs.deviceNo;
				that.tableData[2].name = typeof(datstrs.soc) == "undefined" ? 0 : datstrs.soc + "%";
				that.tableData[3].name = typeof(datstrs.batStatus) == "undefined" ? 0 : datstrs.batStatus;
				that.tableData[4].name = typeof(datstrs.batV) == "undefined" ? 0 : (datstrs.batV).toFixed(2) + "V";
				that.tableData[5].name = typeof(datstrs.batCur) == "undefined" ? 0 : (datstrs.batCur).toFixed(2) + "A";
				let temp = typeof(datstrs.temp) == "undefined" ? 0 : datstrs.temp + "℃";
				temp = temp.replace(",","℃ ");
				that.tableData[6].name = temp;
				that.tableData[7].name = typeof(datstrs.count) == "undefined" ? 0 : datstrs.count;
				that.tableData[8].name = typeof(datstrs.version) == "undefined" ? 0 : datstrs.version;
				that.tableData[9].name = typeof(datstrs.minSingleBatV) == "undefined" ? 0 : (datstrs.minSingleBatV).toFixed(2) + "V";
				that.tableData[10].name = typeof(datstrs.maxSingleBatV) == "undefined" ? 0 : (datstrs.maxSingleBatV).toFixed(2) + "V";
				switch(datstrs.gpsStatus){
					case 0:
					that.tableData[11].name = "无效";
					break;
					case 1:
					that.tableData[11].name = "GPS定位";
					break;
					case 2:
					that.tableData[11].name = "北斗定位";
					break;
					case 3:
					that.tableData[11].name = "LBS定位";
					break;
					default:
					that.tableData[11].name = "无效";
				}
				// that.tableData[11].name = datstrs.gpsStatus == 1 ? '有效' : '无效';
				that.tableData[12].name = typeof(datstrs.gpsSignal) == "undefined" ? 0 : datstrs.gpsSignal;
				that.tableData[13].name = typeof(datstrs.gpsSignal) == "undefined" ? 0 : datstrs.gpsSignal;
				//电压
				that.$refs.setmns.setnums(typeof(datstrs.batV) == "undefined" ? 0 : (datstrs.batV).toFixed(2));
				//电流
				that.$refs.setmn.setnum(typeof(datstrs.batCur) == "undefined" ? 0 : (datstrs.batCur).toFixed(2));
				//折线图
				that.$refs.setmnlin.setnums(typeof(datstrs.batCur) == "undefined" ? 0 : (datstrs.batCur).toFixed(2), typeof(datstrs
					.batV) == "undefined" ? 0 : (datstrs.batV).toFixed(2), datstrs.temp, that.flag);
				that.flag = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warning {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		line-height: 2rem;
		height: var(--height);
		margin: 0 0.9rem 0rem 0.7rem;
		background: white;
		width: 100%;

		.wtit {
			width: 100%;
			text-align: center;
			line-height: 3rem;
			font-weight: bold;
			color: #aaaa00;
		}

		.w1 {
			width: 100%;
			text-align: left;
			line-height: 0px;
			padding: 0 2.5rem;

			span {
				background: #cdb8b8;
				display: inline-block;
				width: 8px;
				height: 15px;
				border-radius: 10px;
				margin-left: 8rem;
				position: absolute;
				margin-top: -0.5rem;
			}

			span.active {
				animation: greenLamp 1s ease infinite;
			}


		}
	}

	.active1 {
		animation: redLamp 1s ease infinite;
	}

	.active1s {
		animation: greenLamp 1s ease infinite;
	}

	.ligth {
		background: #4bbf10;
		display: inline-block;
		width: 8px;
		height: 15px;
		border-radius: 10px;
		position: absolute;
		margin-top: -0.5rem;
	}

	.ligths {
		background: #888888;
		display: inline-block;
		width: 8px;
		height: 15px;
		border-radius: 10px;
		position: absolute;
		margin-top: -0.5rem;
	}

	@keyframes redLamp {
		0% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		// 9.9% {
		// 	background-color: #999;
		// 	box-shadow: 0 0 10px #000000;
		// }

		// 10% {
		// 	background-color: red;
		// 	box-shadow: 0 0 10px #000000;
		// }

		40% {
			background-color: red;
			box-shadow: 0 0 10px #000000;
		}

		40.1% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		100% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}
	}

	@keyframes yellowLamp {
		0% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		39.9% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		40% {
			background-color: yellow;
			box-shadow: 0 0 10px #000000;
		}

		70% {
			background-color: yellow;
			box-shadow: 0 0 10px #000000;
		}

		70.1% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		100% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}
	}

	@keyframes greenLamp {
		0% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		69.9% {
			background-color: #999;
			box-shadow: 0 0 10px #000000;
		}

		70% {
			background-color: green;
			box-shadow: 0 0 10px #000000;
		}

		100% {
			background-color: green;
			box-shadow: 0 0 10px #000000;
		}
	}

	.tsd {
		position: absolute;
		z-index: 100;
		display: inline-flex;
		padding: 0.6rem 1rem;

		.btns {
			margin-left: 10px;
			background-color: #e578ff;
			cursor: pointer;
			padding: 0px 15px;
			border-radius: 10px;
			font-size: 12px;
			color: #ffffff;
			display: inline-block;
			height: 23px;
			margin-top: 8px;
			line-height: 23px;
		}

		.btns:hover {
			background-color: #694fff;
		}
	}

	.dashboard-editor-container {
		padding: 12px;
		background-color: rgb(240, 242, 245);
		position: relative;

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
		}
	}

	.chart-wrappers {
		width: 35%;
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}

	.container {
		position: relative;
		width: 5.2rem;
		margin: auto 5rem;
	}

	.header {
		position: absolute;
		width: 12rem;
		height: 6rem;
		left: -3.5rem;
		top: 2rem;
		-webkit-transform: translate(-50%, -10px);
		transform: translate(-50%, -10px);
		border-radius: 5px 5px 0 0;
		background: url(../../../assets/images/power.png) no-repeat center center;
		background-size: contain;
		z-index: 11;
		transform: rotate(7deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}

	.battery {
		position: relative;
		height: 10rem;
		box-sizing: border-box;
		border-radius: 15px 15px 5px 5px;
		box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
		background: #fff;

		z-index: 1;
	}

	.battery::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--tops);
		background: linear-gradient(to bottom, #5aff75 0%, #31eb40 44%, #27eb24 100%);
		border-radius: 0px 0px 5px 5px;
		box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
		//animation: charging 10s linear infinite;
		filter: hue-rotate(10deg);
	}

	.wave-box {
		position: absolute;
		top: 0;
		left: 0;
		height: 10rem;
		width: 5.2rem;
		border-radius: 15px 15px 5px 5px;
		overflow: hidden;
		/*隐藏掉多余得圆形部分*/
	}

	.socsho {
		position: absolute;
		height: 12rem;
		width: 5.2rem;
		text-align: center;
		margin-top: -11rem;
		z-index: 1000;
		color: #ffffff;
		line-height: 19rem;
		font-size: 30px;
		text-shadow: 0 0 10px #393656;
	}

	.g-wave {
		position: absolute;
		width: 12rem;
		height: 12rem;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 45% 47% 44% 42%;
		bottom: var(--tops);
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 1;
		animation: move 5s linear infinite;
	}

	.g-wave:nth-child(2) {
		border-radius: 38% 46% 43% 47%;
		transform: translate(-50%, 0) rotate(-135deg);
	}

	.g-wave:nth-child(3) {
		border-radius: 42% 46% 37% 40%;
		transform: translate(-50%, 0) rotate(135deg);
	}

	@keyframes charging {
		50% {
			box-shadow: 0 14px 28px rgba(0, 255, 0, 0.8), 0px 4px 10px rgba(85, 255, 0, 0.4);
		}

		95% {
			top: 5%;
			filter: hue-rotate(0deg);
			border-radius: 0 0 5px 5px;
			box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
		}

		100% {
			top: 0%;
			filter: hue-rotate(0deg);
			border-radius: 15px 15px 5px 5px;
			box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
		}
	}

	@keyframes move {
		100% {
			transform: translate(-50%, 0px) rotate(720deg);
		}
	}

	svg.lig.svg-icon {
		font-size: large;
		position: absolute;
		margin-top: -10rem;
		display: inline-block;
		width: 5.2rem;
		height: 10rem;
		z-index: 10;
	}

	.showtit {
		position: absolute;
		margin-top: 25px;
		width: 13rem;
		display: inline-block;
		text-align: center;
		margin-left: -4rem;
	}
</style>
